<template>
  <div class="top_continer" :style="{paddingBottom:!isNav?'8px':'0px'}">
    <div class="top_wrap">
      <img v-show="isNav" src="../assets/img/logo.jpg" alt="">
      <p class="back" v-show="!isNav" @click="back">返回</p>
      <div >
        <form action="/" @submit.prevent="search" v-if="blur_">
          <input type="search" @focus="to_search" v-model="mSearchVal" ref="search_input" placeholder="津猫">
        </form>
        <b @click="btn_search"></b>
      </div>
      <ul v-if="isNav">
        <router-link tag="li" @click.native="setkeep" class="tab-item" to="/index">
          <span class="tab-link">商城首页</span>
          <b></b>
        </router-link>
        <router-link tag="li" @click.native="setkeep" class="tab-item" to="/allClass">
          <span class="tab-link">全部分类</span>
          <b></b>
        </router-link>
        <router-link tag="li" @click.native="setkeep" class="tab-item" to="/about">
          <span class="tab-link">关于铭材</span>
          <b></b>
        </router-link>
        <router-link tag="li" @click.native="setkeep" class="tab-item" to="/downLoad">
          <span class="tab-link">下载app</span>
          <b></b>
        </router-link>
      </ul>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    props: [],
    data() {
      return {
        router: "",
        blur_: true,
        mSearchVal: "",
        isNav:true,
      }
    },
    created() {
      if(this.$route.path==='/detial'||this.$route.path==='/search'){
        this.isNav=false
      }
    },
    mounted() {
    },
    computed: {
      ...mapGetters([
        'searchVal'
      ])
    },
    methods: {
      setkeep() {
        this.$emit('setkeep', "")
      },
      search() {  //回车搜索
        this.$emit("setkeep", "")
        const val = this.$refs.search_input.value ? this.$refs.search_input.value : this.$refs.search_input.getAttribute("placeholder")
        this.setSearchVal(val)
        // this.blur_ = false
        this.$refs.search_input.blur()
        setTimeout(() => {
          // this.blur_ = true
          this.$router.push({
            path: "/search"
          })
        }, 20)
        setTimeout(() => {
          this.$refs.search_input.value = val
        }, 20)
      },
      to_search() {  //获取焦点就去search页
        this.$router.push({
          path: "/search"
        })
      },
      btn_search() {
        this.$emit("setkeep", "")
        const val = this.$refs.search_input.value ? this.$refs.search_input.value : this.$refs.search_input.getAttribute("placeholder")
        this.$refs.search_input.value = val
        this.$router.push({
          path: "/search"
        })
        setTimeout(() => {
          this.setSearchVal(val)
        }, 200)

      },
      back() {
          this.$router.back()
      },
      ...mapMutations({
        setSearchVal: 'SET_SEARCH_VAL'
      })
    },
    components: {},
    watch: {
      mSearchVal(newV) {
        if (newV === '') {
          this.setSearchVal(newV)
        }
      },
      searchVal(newV) {
        if (newV) {
          this.mSearchVal = newV
        }
      },
      '$route'(to, from) {
        if(to.path==='/detial'||to.path==='/search'){
          this.isNav=false
        }else{
          this.isNav=true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .top_continer {
    background-color: #2096d4;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 5;
    max-width: 768px;
    min-width: 320px;
  }

  .top_wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    > img {
      width: 46px;
      margin-left: 5px;
      margin-top: 13px;
      float: left;
      margin-right: 16px;
    }
    > div {
      overflow: hidden;
      margin-top: 20px;
      position: relative;
      margin-right: 20px;
      height: 32px;
      input::-webkit-input-placeholder {
        color: #83cff1;
      }
      input::-moz-placeholder {
        color: #83cff1;
      }
      input:-moz-placeholder {
        color: #83cff1;
      }
      input:-ms-input-placeholder {
        color: #83cff1;
      }
      input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none; //此处只是去掉默认的小×
      }
      form {
        padding-top: 6px;
        border: 2px solid #32b3ec;
        border-radius: 18px;
        padding-left: 10px;
        height: 32px;
        padding-right: 44px;
      }
      input {
        width: 100%;
        height: 15px;
        line-height: 15px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 13px;
        letter-spacing: 1px;
        background-color: #2096d4;
      }
      > b {
        position: absolute;
        top: 0;
        right: 9px;
        width: 32px;
        height: 32px;
        background-image: url("../assets/img/22.png");
        background-size: 80% 80%;
        background-position-y: 42%;
        background-repeat: no-repeat;
        transition: transform 0.12s;
        cursor: pointer;
        &:active {

          transform: scale(1.2);
        }
      }
    }
    > ul {
      width: 100%;
      overflow: hidden;
      font-size: 15px;
      color: #fff;
      opacity: 0.9;
      > li {
        width: 25%;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        float: left;
        letter-spacing: 2px;
        overflow: hidden;
        position: relative;
        > span {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 10;
          cursor: pointer;
        }
        > b {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 1px;
          height: 1px;
          border-radius: 40%;
          background: rgba(0, 135, 212, 1);
          transform: scale(0);
          transition: transform 0.11s;
        }
        &:active {
          > b {
            transform: scale(90);

          }
        }

      }
    }
  }
  .back{
    float: left;
    width: 67px;
    height: 31px;
    line-height: 31px;
    margin-top: 20px;
    color: #fff;
    font-size: 14px;
  }
  .router-link-active {
    color: #fef000;
  }
</style>
